<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- 
            - 给插槽起一个名字，使用插槽的时候可以使用名字来决定到底替换哪一个插槽

         -->
        <div id="app">
            <cpn><span slot="center">中间啊</span></cpn>
        </div>
        <template id="cpn">
            <div>
                <slo name="left">左边</slo>
                <slot name="center">中间</slot>
                <slot name="right">右边</slot>

                <slot>哈哈</slot>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊'
            },
            components: {
                cpn: {
                    template: '#cpn'
                }
            }
        })
        </script>
    </body>
</html>